<template>
    <div>
        <div class="header">
            <div class="top">
                <div  v-for="item in img" :key="item.id">
                    <img :src="item.src" alt="">
                </div>
            </div>
            <div class="bottom">
                <div v-for="item in text" :key="item.id">
                    <span>{{ item.text }}</span>
                </div>
            </div>
        </div>
        <div class="lookedCar">
            <div class="top">
                <span style="font-weight: bold;">看过的车</span>
                <span class="more">更多
                    <el-icon size="10">
                        <ArrowRight color="#8D8D8F"/>
                    </el-icon>
                </span>
            </div>
            <div class="bottom">
                <div class="car" v-for="item in lookedCar" :key="item.id">
                    <img :src="item.img" alt="">
                    <span>{{ item.text }}</span><br>
                    <span id="red">{{ item.price }}</span>
                </div>
            </div>
        </div>
        <div class="SalesRanking">
            <div class="top">
                <span style="font-weight: bold;">销售排行</span>
                <span class="more">更多
                    <el-icon size="10">
                        <ArrowRight color="#8D8D8F"/>
                    </el-icon>
                </span>
            </div>
            <div class="bottom">
                <div class="car" v-for="item in SalesRanking" :key="item.id">
                    <img :src="item.src" alt="">
                    <span>{{ item.text }}</span><br>
                    <span id="blue">{{ item.price }}</span>
                </div>
            </div>
        </div>
        <div class="choice">
            <router-link :to="{name:'hotbrands'}">热门品牌</router-link>
            <router-link :to="{name:'brandselection'}">品牌选车</router-link>
            <router-link :to="{name:'conditionselection'}">条件选车</router-link>
        </div>
        <router-view></router-view>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    setup () {
        let img = [
            {
                id:1,
                src:require('../../assets/新能源/头部1.png')
            },
            {
                id:2,
                src:require('../../assets/新能源/头部2.png')
            },
            {
                id:3,
                src:require('../../assets/新能源/头部3.png')
            },
            {
                id:4,
                src:require('../../assets/新能源/头部4.png')
            },
            {
                id:5,
                src:require('../../assets/新能源/头部5.png')
            }
        ]
        let text = [
            {
                id:1,
                text:'销售排行'
            },
            {
                id:2,
                text:'上市新车'
            },
            {
                id:3,
                text:'续航排行'
            },
            {
                id:4,
                text:'易车充电'
            },
            {
                id:5,
                text:'购车计算器'
            }
        ]
        let lookedCar = [
            {
                id:1,
                img:require('../../assets/新能源/看过的车1.png'),
                text:'Polestar 2',
                price:'29.98-35.8...'
            },
            {
                id:2,
                img:require('../../assets/新能源/看过的车2.png'),
                text:'奔驰EQA',
                price:'32.18万'
            },
            {
                id:3,
                img:require('../../assets/新能源/看过的车3.png'),
                text:'Taycan',
                price:'89.80-183.8..'
            },
            {
                id:4,
                img:require('../../assets/新能源/看过的车4.png'),
                text:'ZEEKR 001',
                price:'30.00-40.3...'
            }
        ]
        let SalesRanking = [
            {
                id:1,
                src:require('../../assets/新能源/销售排行1.png'),
                text:'宋PLUS..',
                price:'查看价单'
            },
            {
                id:2,
                src:require('../../assets/新能源/销售排行2.png'),
                text:'Model Y',
                price:'查看价单'
            },
            {
                id:3,
                src:require('../../assets/新能源/销售排行3.png'),
                text:'宏光MIN..',
                price:'查看价单'
            },
            {
                id:4,
                src:require('../../assets/新能源/销售排行4.png'),
                text:'汉',
                price:'查看价单'
            },
            {
                id:5,
                src:require('../../assets/新能源/销售排行5.png'),
                text:'海豚',
                price:'查看价单'
            }
        ]
        return {
            img,
            text,
            lookedCar,
            SalesRanking
        }
    }
})
</script>

<style scoped>
.header{
    background-color: #F6F7FB;
    width: 100%;
    padding: 30px 0;
}
.header .top,.header .bottom{
    justify-content:space-evenly;
    display:flex;
}
.header .top img{
    width: 80px;
    height: 80px;
}
.header .bottom{
    font-size:20px;
    margin-top: 20px;
}
.lookedCar .top,.SalesRanking .top{
    display:flex;
    justify-content: space-between;
    font-size:25px;
    padding: 0 20px;
    height:60px;
    line-height:60px;
}
.lookedCar .top .more,.SalesRanking .top .more{
    font-size:20px;
    color:#8D8D8F;
}
.lookedCar .bottom,.SalesRanking .bottom{
    display:flex;
    justify-content: space-evenly;
}
.lookedCar .bottom .car{
    background-color: #F6F7FB;
    width: 23%;
    border-radius:20px;
    font-size:20px;
    text-align: center;
    height:200px;
}
.lookedCar .bottom .car img,.SalesRanking .bottom .car img{
    width:100%;
    height:100px;
    border-radius:20px;
}
.lookedCar .bottom .car #red{
    color: #D97186;
}
.lookedCar .bottom .car span{
    line-height:40px;
}
.SalesRanking .bottom .car{
    background-color: white;
    width: 18%;
    border-radius:20px;
    font-size:20px;
    text-align: center;
    height:200px;
}
.SalesRanking .bottom .car #blue{
    background-color: #F1F3FF;
    color:#586ABB;
    display: inline-block;
    width: 100px;
    padding: 10px;
    text-align: center;
    line-height: 30px;
}
.choice{
    background-color: #F8F9FD;
    width: 100%;
    line-height: 40px;
    padding: 20px 0;
}
.choice a{
    font-size: 20px;
    padding: 10px 20px;
}
</style>